import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

type WaitDoctor = {
	id: string;
	name: string;
	title: string; // 主任医师 等
	department: string; // 科室
	hospital: string; // 医院
	avatar?: string; // 头像占位
	currentNo: number; // 当前接诊号
};

function Index() {
	const nav = useNavigate();
	const [activeTab, setActiveTab] = useState<'wait' | 'examination' | 'pharmacy'>('wait');
	const [waitDoctors, setWaitDoctors] = useState<WaitDoctor[]>([]);

	const handleBack = () => nav(-1);
	const handleMoreOptions = () => console.log('更多');
	const handleTarget = () => console.log('目标');
	const handleSwitchPatient = () => console.log('切换患者');

	useEffect(() => {
		// 模拟候诊医生列表数据
		const mock: WaitDoctor[] = [
			{
				id: '1',
				name: '刘医生',
				title: '主任医师',
				department: '门诊外一科',
				hospital: '四川省保健院南苑',
				currentNo: 15,
			},
			{
				id: '2',
				name: '张医生',
				title: '主任医师',
				department: '口腔科',
				hospital: '四川省保健院南苑',
				currentNo: 6,
			},
		];
		setWaitDoctors(mock);
	}, []);

	const Tab = ({ id, text }: { id: 'wait' | 'examination' | 'pharmacy'; text: string }) => (
		<div
			onClick={() => setActiveTab(id)}
			style={{
				flex: 1,
				padding: '12px 16px',
				textAlign: 'center',
				cursor: 'pointer',
				background: activeTab === id ? '#1677ff' : '#fff',
				color: activeTab === id ? '#fff' : '#333',
				fontSize: '16px',
				fontWeight: 500,
				transition: 'all 0.3s ease',
			}}
		>
			{text}
		</div>
	);

	const DoctorCard = ({ d }: { d: WaitDoctor }) => (
		<div
			style={{
				background: '#fff',
				borderRadius: '12px',
				padding: '16px',
				marginBottom: '12px',
				boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
			}}
		>
			<div style={{ display: 'flex', alignItems: 'center' }}>
				{/* 头像 */}
				<div
					style={{
						width: 48,
						height: 48,
						borderRadius: '50%',
						background: '#eef6ff',
						display: 'flex',
						alignItems: 'center',
						justifyContent: 'center',
						marginRight: 12,
					}}
				>
					<span style={{ fontSize: 22 }}>👨‍⚕️</span>
				</div>
				<div style={{ flex: 1 }}>
					<div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
						<div style={{ fontSize: 18, fontWeight: 700, color: '#222' }}>{d.name}</div>
						<div style={{ fontSize: 13, color: '#666' }}>{d.title}</div>
					</div>
					<div style={{ marginTop: 6, display: 'flex', gap: 16, color: '#666', fontSize: 14 }}>
						<div>{d.department}</div>
						<div>{d.hospital}</div>
					</div>
				</div>
			</div>
			<div style={{ marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
				<div
					style={{
						background: '#fff7e6',
						color: '#faad14',
						padding: '8px 14px',
						borderRadius: 10,
						display: 'flex',
						alignItems: 'center',
						gap: 10,
						fontSize: 14,
					}}
				>
					<span>当前接诊号</span>
					<span style={{ fontSize: 18, fontWeight: 700 }}>{d.currentNo}</span>
				</div>
				<div
					onClick={() => nav('/hd')}
					style={{ color: '#1677ff', fontSize: 14, cursor: 'pointer' }}
				>
					{/* 查看排队情况 > */}
				</div>
			</div>
		</div>
	);

	return (
		<div style={{ width: '100vw', minHeight: '100vh', background: '#f5f5f5' }}>
			{/* 顶部导航 */}
			<div
				style={{
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between',
					padding: '12px 16px',
					background: '#fff',
					borderBottom: '1px solid #f0f0f0',
				}}
			>
				<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
					<div onClick={handleBack} style={{ fontSize: 20, cursor: 'pointer', color: '#333' }}>‹</div>
					<div style={{ fontSize: 18, fontWeight: 600, color: '#333' }}>候诊查询</div>
				</div>
				<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
					<div onClick={handleMoreOptions} style={{ fontSize: 18, cursor: 'pointer', color: '#333' }}>⋯</div>
					<div onClick={handleTarget} style={{ fontSize: 18, cursor: 'pointer', color: '#333' }}>◎</div>
				</div>
			</div>

			{/* 患者信息 */}
			<div
				style={{
					margin: 16,
					background: '#fff',
					borderRadius: 12,
					padding: 16,
					boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
				}}
         onClick={()=>nav('/hd')}
			>
				<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
					<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
						<div style={{ fontSize: 16, fontWeight: 600, color: '#333' }}
           
            >王小柯</div>
						<div style={{ fontSize: 14, color: '#999' }}>2015****10</div>
					</div>
					<div
						onClick={handleSwitchPatient}
						style={{ display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer', padding: '4px 8px', borderRadius: 4, background: '#f5f5f5' }}
					>
						<span style={{ fontSize: 14 }}>👥</span>
						<span style={{ fontSize: 14, color: '#333' }}>切换</span>
					</div>
				</div>
			</div>

			{/* 标签 */}
			<div style={{ margin: '0 16px 16px', background: '#fff', borderRadius: 12, overflow: 'hidden', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
				<div style={{ display: 'flex' }}>
					<Tab id="wait" text="候诊（接诊）" />
					<Tab id="examination" text="检查" />
					<Tab id="pharmacy" text="取药" />
				</div>
			</div>

			{/* 内容列表 */}
			<div style={{ padding: '0 16px 16px' }}>
				{activeTab === 'wait' && waitDoctors.map((d) => <DoctorCard key={d.id} d={d} />)}
				{activeTab === 'examination' && (
					<div style={{ color: '#999', textAlign: 'center', padding: '40px 0' }}>暂无检查排队信息</div>
				)}
				{activeTab === 'pharmacy' && (
					<div style={{ color: '#999', textAlign: 'center', padding: '40px 0' }}>暂无取药排队信息</div>
				)}
			</div>
		</div>
	);
}

export default Index;
